<template>
  <div class="promotion">
    <el-col tag="h4" class="pr_h4">促销列表</el-col>
    <el-col class="content">
      <template v-if="dataarr.length">
        <el-table :data="dataarr" border stripe size="small">
          <el-table-column
            v-for="col in columns2"
            :prop="col.id"
            :key="col.id"
            :label="col.label"
            :width="col.width"
            show-overflow-tooltip
            :sortable="col.pre"
          ></el-table-column>
          <el-table-column label="封面">
            <template slot-scope="scope">
              <div class="ming">
                <img :src="scope.row.cover" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="商品状态" width="120">
            <template slot-scope="scope">
              <template v-if="scope.row.status === 0">已下架</template>
              <template v-else>在售</template>
            </template>
          </el-table-column>
          <el-table-column label="操 作" min-width="220">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click.native.prevent="check2(scope.row)"
                :type="scope.row.status == 1 ? 'danger' : 'primary'"
              >
                <i class="el-icon-search"></i>
                {{ scope.row.status == 1 ? "禁用" : "启用" }}
              </el-button>
              <el-popover placement="right" width="500" :model="P_visible">
                <h5>修改促销商品</h5>
                <el-form
                  :model="formdata2"
                  ref="form2"
                  label-width="120px"
                  size="mini"
                  :rules="rules2"
                >
                  <el-form-item label="活动价格">
                    <el-input v-model="formdata2.act_price" type="number" :min="0"></el-input>
                  </el-form-item>
                  <el-form-item label="商品库存量">
                    <el-input v-model="formdata2.number" type="number" :min="0"></el-input>
                  </el-form-item>
                  <el-form-item label="邮递费">
                    <el-input v-model="formdata2.fee" :min="0" type="number"></el-input>
                  </el-form-item>
                  <el-form-item label="商品标题">
                    <el-input v-model="act_name"></el-input>
                  </el-form-item>
                  <el-form-item label="封面" prop="cover">
                    <upimg @getpath="getpath2" ref="upimg"></upimg>
                  </el-form-item>
                  <el-form-item>
                    <el-button type="primary" @click="onsbmit(scope.row.id, 'edit')">确定</el-button>
                  </el-form-item>
                </el-form>
                <el-button
                  slot="reference"
                  size="mini"
                  type="success"
                  class="ref_button"
                  @click="openend(scope.row)"
                >修改</el-button>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <el-col class="page">
          <el-button type="primary" @click="add" size="small">添加商品</el-button>
          <el-pagination
            ref="pagination"
            layout="prev, pager, next"
            :total="total2"
            @current-change="handleCurrentChange2"
            :page-size="12"
            class="page_center"
          ></el-pagination>
        </el-col>
      </template>
      <template v-else>
        <div class="error">暂无促销商品</div>
        <el-col>
          <!-- <el-button type="primary" @click="add">添加商品</el-button> -->
        </el-col>
      </template>
    </el-col>
    <!-- <el-drawer
      title="选择商品"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
      :append-to-body="true"
      :show-close="true"
      :size="'88%'"
    >
      <el-col class="con_tab">
        <el-col tag="strong">
          <i class="el-icon-paperclip"></i> 点击空白处可关闭弹窗
        </el-col>
        <el-col class="el-ctable">
          <el-table
            :data="commodity_list"
            border
            stripe
            size="small"
            @selection-change="handleSelectionChange"
            v-loading="loading"
          >
          
            <el-table-column
              v-for="col in columns"
              :prop="col.id"
              :key="col.id"
              :label="col.label"
              :width="col.width"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column label="商品状态" width="120">
              <template slot-scope="scope">
                <template v-if="scope.row.status === 0">已下架</template>
                <template v-else>在售</template>
              </template>
            </el-table-column>
            <el-table-column label="操 作" min-width="220">
              <template slot-scope="scope">
                <el-popover placement="right" width="500" :model="P_visible">
                  <h5>输入促销规则</h5>
                  <el-form
                    :model="formdata"
                    ref="form"
                    label-width="100px"
                    size="mini"
                    :rules="rules"
                  >
                    <el-form-item label="活动价格" prop="act_price">
                      <el-input v-model="formdata.act_price" type="number" :min="0"></el-input>
                    </el-form-item>
                    <el-form-item label="商品库存量" prop="number">
                      <el-input v-model="formdata.number" type="number" :min="0"></el-input>
                    </el-form-item>
                    <el-form-item label="邮递费" prop="fee">
                      <el-input v-model="formdata.fee" :min="0" type="number"></el-input>
                    </el-form-item>
                    <el-form-item label="活动商品名称" prop="act_name">
                      <el-input v-model="formdata.act_name"></el-input>
                    </el-form-item>
                    <el-form-item label="封面" prop="cover">
                      <upimg @getpath="getpath" ref="upimg"></upimg>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="onsbmit(scope.row.id)">确定</el-button>
                    </el-form-item>
                  </el-form>
                  <el-button slot="reference" size="mini" type="success">选择</el-button>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            ref="pagination"
            layout="prev, pager, next"
            :total="total"
            @current-change="handleCurrentChange"
            :page-size="12"
            class="page_center"
          ></el-pagination>
        </el-col>
      </el-col>
    </el-drawer>-->
  </div>
</template>
<script>
import upimg from "@/components/upimg";
export default {
  data() {
    return {
      key: "",
      dataarr: [], //商品列表
      drawer: false, //控制商品列表的显示隐藏
      direction: "rtl", //打开方式
      commodity_list: [],
      loading: false, //分享指令
      columns2: [
        {
          id: "com_name",
          label: "商品标题"
        },
        {
          id: "price",
          label: "商品原价格（￥）",
          pre: true
        },
        {
          id: "act_price",
          label: "活动价格(￥)",
          width: "",
          pre: true
        },
        {
          id: "fee",
          label: "运费",
          width: "",
          pre: true
        },
        {
          id: "number",
          label: "库存量",
          width: "",
          pre: true
        }
      ],
      rules: {
        act_price: [
          { required: true, message: "请输入折扣后的价格", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请输入活动数量", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ],
        fee: [
          { required: true, message: "请输入所需运费", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ],
        act_name: [
          { required: true, message: "请输入活动商品名称", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ]
      },
      rules2: {
        act_price: [
          { required: true, message: "请输入折扣后的价格", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ],
        number: [
          { required: true, message: "请输入活动数量", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ],
        fee: [
          { required: true, message: "请输入所需运费", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ],
        act_name: [
          { required: true, message: "请输入活动商品名称", trigger: "blur" },
          { min: 1, message: "不小于0", trigger: "blur" }
        ]
      },
      act_name: "",
      columns: [
        {
          id: "name",
          label: "商品名称"
        },

        {
          id: "stock",
          label: "商品库存",
          width: "120"
        },
        {
          id: "price",
          label: "商品价格（￥）",
          width: ""
        },
        {
          id: "sales_num",
          label: "商品销量"
        }
      ],
      screen: {
        name: "",
        region: "",
        page: "",
        status: ""
      },
      formdata: {
        act_price: "",
        number: "",
        com_id: "",
        fee: "",
        cover: "",
        act_name: ""
      },
      formdata2: {
        act_price: "",
        number: "",
        com_id: "",
        fee: "",
        cover: "",
        act_name: ""
      },
      page: "",
      total: 0,
      total2: 0,
      P_visible: false
    };
  },
  components: {
    upimg
  },
  mounted() {
    this.getactivity_list();
  },
  methods: {
    openend(row) {
      // this.P_visible = true;
      this.formdata2 = row;
      let str = row.com_name;
      this.act_name = str;
    },
    add() {
      this.getlist();
      this.drawer = !this.drawer;
    },
    getpath(path) {
      //封面
      this.formdata.cover = path;
      return path;
    },
    getpath2(path) {
      //封面
      console.log(path);
      this.formdata2.cover = path;
      return path;
    },
    check(index, row) {
      console.log(index, row);
    },
    handleClose(done) {
      //关闭时的回掉

      this.$confirm("确认关闭？")
        .then(() => {
          this.getactivity_list();
          done();
        })
        .catch(() => {});
    },
    async getlist() {
      //获取商品列表
      this.loading = true;
      let res = await this.$store.dispatch("adminlistcommodity", this.screen);
      this.loading = false;
      if (!res.code) {
        this.commodity_list = res.data.data;
        this.total = res.data.total;
      }
    },
    async getactivity_list() {
      let data = {
        page: this.page
      };
      let dataarr = await this.$store.dispatch("activity_list", data);
      if (!dataarr.code) {
        // console.log(dataarr);
        this.dataarr = dataarr.data.activity.data;
        console.log(this.dataarr);
        this.total2 = dataarr.data.activity.total;
      }
    },
    handleCurrentChange(val) {
      this.screen.page = val;
      this.getlist();
    },
    handleSelectionChange(val) {
      console.log(val);
    },
    hide() {
      console.log(11);
    },
    async check2(row) {
      console.log(row);
      //启用 禁用
      let data = {
        act_id: row.id
      };
      let res = await this.$store.dispatch("enable_act_com", data);
      if (!res.code) {
        this.$message({
          type: "success",
          message: "操作成功"
        });
        this.getactivity_list();
      } else {
        // this.$message({
        //   type:"error",
        //   message:"操作成功"
        // })
      }
    },
    async editRow2(id) {
      //促销商品修改
      this.formdata2.act_id = id;
      this.formdata2.act_name = this.act_name;
      let res = await this.$store.dispatch("edit_activity", this.formdata2);
      this.P_visible = false;

      if (!res.code) {
        this.$message({
          type: "success",
          message: "修改成功！"
        });
        this.formdata = {
          act_price: "",
          number: "",
          com_id: "",
          fee: "",
          act_id: ""
        };
        this.getactivity_list();
      } else {
        if (res.datap[0] == "com_name is error") {
          this.$message({
            type: "success",
            message: "请输入产品活动标题！"
          });
        }
      }
    },
    handleCurrentChange2(val) {
      this.page = val;
      this.getactivity_list();
    },
    // 添加促销商品
    onsbmit(id, type) {
      let dataname = "";
      if (type == "edit") {
        dataname = "form2";
      } else {
        dataname = "form";
      }

      this.$refs[dataname].validate(valid => {
        if (valid) {
          if (type == "edit") {
            this.editRow2(id);
          } else {
            this.add_activity_com(id);
          }
        } else {
          this.$message({
            type: "error",
            message: "请填写完整表单"
          });
          return false;
        }
      });
    },
    async add_activity_com(id) {
      this.formdata.com_id = id;
      let res = await this.$store.dispatch("add_activity_com", this.formdata);
      this.P_visible = false;

      if (!res.code) {
        // console.log(res);
        this.$message({
          type: "success",
          message: "创建成功"
        });
        this.formdata = {
          act_price: "",
          number: "",
          com_id: "",
          fee: ""
        };
      } else {
        if (res.data[0] == "The product already exists in the event product") {
          this.$message({
            type: "error",
            message: "请不要重复添加"
          });
        }
      }
    }
  }
};
</script>
<style lang="scss">
.el-drawer__header {
  margin-bottom: 10px;
}
.el-ctable {
  padding: 4px 20px;
}
.pr_h4 {
  background: #ffffff;
  height: 36px;
  line-height: 36px;
}
.error {
  font-size: 30px;
  padding: 20px;
}
.con_tab {
  strong {
    padding-left: 22px;
    font-size: 16px;
    padding-bottom: 10px;
  }
}
.content {
  padding: 5px 12px;
  background: #ffffff;
}
.ref_button {
  margin-left: 12px;
}
.ming {
  width: 45px;
  height: 45px;
  overflow: hidden;
  img {
    width: 100%;
    // height: 100%;
  }
}
</style>
